import { memo, useEffect, useRef } from 'react'
import type { FC } from 'react'
import { useSetState } from 'ahooks'
import { Checkbox, Col, Form, Input, Row, Select } from 'antd'
import { Editor } from '../education/edit'
import { getMonth, getYear } from '@/app/utils'

interface IndexProps {
  displayName: string
}
const Index: FC<IndexProps> = ({ displayName }) => {
  const [state, setState] = useSetState<{ months: any[]; years: any[] }>({
    months: [],
    years: [],
  })
  useEffect(() => {
    setState({ months: getMonth(12), years: getYear(80) })
  }, [])
  const endDate = Form.useWatch('endDate')
  return <>
    <div style={{ margin: '10px 10px 20px', fontWeight: 'bold', fontSize: '16px' }}>{displayName}</div>
    <Form.Item name={'title'} label='公司名称'>
      <Input></Input>
    </Form.Item>
    <Form.Item name={'subTitle'} label='职位'>
      <Input></Input>
    </Form.Item>
    <Form.Item label='开始时间' >
      <Row gutter={10}>
        <Col span={12}>
          <Form.Item name={['startDate', 'year']} style={{ marginBottom: 0 }}>
            <Select allowClear placeholder='请选择年份' options={state.years}>
            </Select>
          </Form.Item>
        </Col>
        <Col span={12}>
          <Form.Item name={['startDate', 'month']} style={{ marginBottom: 0 }}>
            <Select allowClear placeholder='请选择月份' options={state.months}>
            </Select>
          </Form.Item>
        </Col>
      </Row>
    </Form.Item>
    <Form.Item label='结束时间' style={{ marginBottom: 0 }}>
      <Row gutter={10}>
        <Col span={12}>
          <Form.Item name={['endDate', 'year']} style={{ marginBottom: 0 }}>
            <Select allowClear disabled={endDate?.untilToday} placeholder='请选择年份' options={state.years}>
            </Select>
          </Form.Item>
        </Col>
        <Col span={12}>
          <Form.Item name={['endDate', 'month']} style={{ marginBottom: 0 }}>
            <Select allowClear disabled={endDate?.untilToday} placeholder='请选择月份' options={state.months}>
            </Select>
          </Form.Item>
        </Col>
      </Row>
    </Form.Item>
    <div style={{ overflow: 'hidden' }}>
      <Form.Item name={['endDate', 'untilToday']} valuePropName="checked" style={{ float: 'right', marginTop: '10px' }}>
        <Checkbox>
            至今
        </Checkbox>
      </Form.Item>
    </div>
    <Form.Item name={'description'} label='描述'>
      <Editor />
    </Form.Item>
    {/* <Form.Item name={'description'} hidden>
      <Input />
    </Form.Item> */}
  </>
}

export default memo(Index)
